<template>
    <div class="mobileBinding">
      <div class="list" @keyup.13="eventshow($event)">
        <ul>
          <li>
            <label>{{lang['CountryofCitizenship']}}</label>
            <select name="LivingCountryId"  v-model="selectedPhoneCode" v-on:change="changePhoneCode($event)" :class="{white: phoneCode}">
              <option v-for="item in countryList" v-bind:value="item.Areacode" v-bind:data-countryCode="item.Code">{{item.Name}}
              </option>
            </select>
          </li>
          <li>
            <label>{{lang['newMobilePhoneNumber']}}</label>
             <input type="text" maxlength="20" class="inptnumber" :placeholder="lang['PleaseEnterNewPhoneNumber']" @input="changePhone" v-model="phone" ref="phone">
            <a class="Area_code" :class="{white: phoneCode}">+{{phoneCode}}<font v-show="!phoneCode">000</font></a>
          </li>
          <li>
            <label>{{lang['smsAuthenticationCode']}}</label>
            <input type="text" name="" maxlength="6" value="" class="inptYz" v-model="verifyCode"  ref="verifyCode" :placeholder="lang['register_PleaseerificationCode']" >
            <a class="countryAreaNo">
              <span v-if="sendMsgDisabled" style="color:rgba(255,255,255,.7);">{{lang['register_ClickGett']}}({{time}})</span>
              <span v-if="!sendMsgDisabled" v-bind:class="{colorActive: !isSendSMS}" @click="sendphone">{{lang['register_ClickGet']}}
              </span>
            </a>
          </li>
          <li>
            <label>{{lang['basic_capitalPassword']}}</label>
            <input type="password" name="" value="" maxlength="6" v-model="pwdText" ref="pwdText" :placeholder="lang['pleaseEnterAFundPassword']">
          </li>

           <li>
            <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }" @click="phoneShow"> {{lang['determineBth']}} </button>
          </li>

        </ul>
      </div>
      <!-- 弹窗 提示-->
      <SwModal :isShow.sync="showModal" modalClass="userModal smallModal" :isShowBg="true" :isCloseOnClickBg="true" :onClosed="onClosed"  :okText="lang['determineBth']" :ok="phoneBtndetermine">
        <div class="successfulOperation">
          <p>{{lang['bindingSuccess']}}</p>
        </div>
      </SwModal>
    </div>
</template>
<script>
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import Utils from '@/utils/Utils.js'
import CheckInput from '@/utils/CheckInput.js'
import rules from '@/utils/rules.js'

export default {
  props: [
    'lang',
    'langKey',
    'countryList'
  ],
  data () {
    return {
      showModal: false,
      time: 60,
      sendMsgDisabled: false,
      phoneCode: '',
      phone: '',
      verifyCode: '',
      pwdText: '',
      selectedPhoneCode: '',
      isSendSMS: true,
      isSubmitBtnCheck: true
    }
  },
  watch: {
    countryList () {
      this.phoneCode = this.countryList[0].Areacode
      this.selectedPhoneCode = this.countryList[0].Areacode
    }
  },
  components: {
    SwModal
  },
  methods: {
    changePhoneCode () {
      if (!this.selectedPhoneCode) {
        this.phoneCode = ''
        ModalApi.message(this.lang['41005'], '', '', 'userModal')
      } else {
        this.phoneCode = this.selectedPhoneCode
      }
    },
    // 输入中校正
    changePhone () {
      let phoneInput = this.$refs.phone
      let value = phoneInput.value
      let phone = value.replace(/\D/g, '')
      phoneInput.value = phone
      this.phone = phone
    },
    checkNationality () { //  判断是否选择国籍
      if (!this.phoneCode) {
        ModalApi.message(this.lang['41005'], '', '', 'userModal')
        return false
      } else {
        return true
      }
    },
    /*
    发送短信
    */
    sendphone () {
      if (!this.isSendSMS) { return }

      if (!this.checkNationality()) { return }

      // 检验手机号码是否为空
      this.checkHandle.chackByIdsInOrder(['phone'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSendSMS = false
        this.$http.post('Security/SendSmsByCode', {
          AreaCode: this.phoneCode,
          VerifyDeviceType: 0,
          VerifyCode: '',
          PhoneOrEmail: this.phone,
          BussinessType: 12,
          LanguageCode: this.langKey
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            // 倒计时
            let me = this
            me.sendMsgDisabled = true
            let interval = window.setInterval(() => {
              if ((me.time--) <= 0) {
                me.time = 60
                me.sendMsgDisabled = false
                window.clearInterval(interval)
              }
            }, 1000)
            ModalApi.message(this.lang['VerificationCodeSuccessful'], '', '', 'userModal')
            // 倒计时
          }
          this.isSendSMS = true
        })
      })
      .catch((info) => {
      })
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.phoneShow()
      }
    },
    /*
    提交修改
    */
    phoneShow () {
      if (!this.isSubmitBtnCheck) { return }

      if (!this.checkNationality()) { return }

      // 检验手机号码  验证码  PIN是否为空
      this.checkHandle.chackByIdsInOrder(['phone', 'verifyCode', 'pwdText'])
      .then((info) => {
        if (!info.isValid) {
          ModalApi.message(info.error(), '', '', 'userModal')
          return
        }
        this.isSubmitBtnCheck = false
        this.$http.post('Security/BindPhone', {
          areaCode: this.phoneCode,
          phone: this.phone,
          pin: this.verifyCode,
          tpwd: this.pwdText
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.phone = ''
            this.verifyCode = ''
            this.pwdText = ''
            this.sendMsgDisabled = false
            this.showModal = !this.showModal
          }
          this.isSubmitBtnCheck = true
        })
      })
      .catch((info) => {
      })
    },
    phoneBtndetermine () {
      this.showModal = false
      this.$emit('GetCustomerList')
    },
    onClosed () {

    }
  },
  mounted () {
    let that = this
    this.checkHandle = new CheckInput({
      rules: rules,
      trimValue (val, item) {
        return val.replace(/^\s+|\s+$/, '')
      },
      list: [
        {
          id: 'phone',
          input: that.$refs.phone,

          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['PleaseEnterNewPhoneNumber']
              }
            },
            {
              isReverseRule: true,
              rule (val) {
                return that.phoneCode === '86' && val && !/^1\d{10}/.test(val)
              },
              error () {
                return that.lang['please enter the correct phone number']
              }
              // ,
              // checkOn: ['keyup']
            }
          ]
        },
        {
          id: 'verifyCode',
          input: that.$refs.verifyCode,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['register_PleaseerificationCode']
              }
            }
          ]
        },
        {
          id: 'pwdText',
          input: that.$refs.pwdText,
          rules: [
            {
              rule: 'required',
              error () {
                return that.lang['pleaseEnterAFundPassword']
              }
            }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less">
  .mobileBinding{
  background: #1A1F2B ;
  padding-bottom: 20px;

  .list{
    width: 420px;
    margin: 0 auto;
  }
  .list  li{
    position: relative;
  }

  .list  li label{
    display: block;
    padding: 15px 10px 5px;
    height: 20px;
    line-height: 20px;
    color: #fff;
   }
  .list  li input{
    padding: 0 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 2px;
    box-sizing: border-box;
    background-color: #2A3440;
    color: #fff;
    font-size: 12px;
  }
  .list  li select{
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    width: 100%;
    border-radius: 2px;
    background-color: #2A3440;
    color:rgba(255,255,255,.7);
    font-size: 12px;
  }
  .list li select.white {
    color: #fff;
  }
  .list li .inptnumber{
    padding-left:90px;
    box-sizing:  border-box;
  }

  .list li .countryAreaNo {
    position: absolute;
    top: 40px;
    right: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
  }

  .list li .countryAreaNo span {
    display: block;
    font-size: 12px;
  }
  .list li .countryAreaNo span.colorActive {
    color: #ccc
  }
  .list li .countryAreaNo:after{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    display: block;
    width: 1px;
    height: 20px;
    border-right: solid 1px #B1BBC2;
   }

  .list li .Area_code {
    position: absolute;
    top: 40px;
    left: 0;
    width: 80px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    text-indent: 10px;
    color:rgba(255,255,255,.7);
    font-size: 12px;
  }
  .list li .Area_code.white {
    color: #fff;
  }
  .list li .Area_code:after{
    position: absolute;
    right: 0;
    top:10px;
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    border-right: solid 1px #B1BBC2;
   }

  .list li .submitBtn {
    width: 50%;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: 20px auto 0;
    text-align: center;
    background: #3782FF;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
  }
  .list li .submitBtn.active{
    background-color: #2A3441;
    cursor:not-allowed;
  }
}

</style>
